import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Form, Input, InputNumber, message, Modal, Radio } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { result, update1,remove } from './service';
import error from './error.png';
import ok from './ok.png';
import { DeleteOutlined } from '@ant-design/icons';

export default () => {
  const actionRef = useRef<any>(null);
  const [dataSource, setDataSource] = useState<Record<string, any>[]>([{
    sn:'',
    isOdd: true,
  }]);
  useEffect(() => {
    setInterval(() => {
      actionRef.current?.reload();
    }, 1000);
  }, []);
  return (
    <PageContainer childrenContentStyle={{ padding: 16 }}>
      <ProTable
        pagination={false}
        cardProps={false}
        bordered
        size="small"
        options={false}
        search={false}
        dataSource={dataSource}
        columns={[
          {
            title: '期数',
            dataIndex: 'sn',
            renderText:(_,record) =>(
              <InputNumber style={{width:'100%'}} value={record.sn} onChange={e=>{
                const newDataSource = dataSource.map(item=>({
                  ...item,
                  sn:e
                }))
                setDataSource(newDataSource);
              }} />
            )
          },
          {
            title: '结果',
            dataIndex: 'isOdd',
            width:50,
            valueEnum: {
              1: {
                text: '单',
              },
              0: {
                text: '双',
              },
            },
          },
          {
            title: '中',
            dataIndex: 'win',
            width:190,
            renderText: (_, record) => {
              return (
                <>
                  <Radio.Group
                    onChange={(e) => {
                      Modal.confirm({
                        title: '提醒',
                        content: '修改预测结果',
                        onOk: () => {
                          update1({
                            sn: record.sn,
                            win: e.target.value,
                          }).then((result) => {
                            message.success(result.msg).then();
                            actionRef.current?.reload();
                            setDataSource([{
                              sn:'',
                              win:null,
                            }])
                          });
                        },
                      });
                    }}
                  >
                    <Radio value={0}>输</Radio>
                    <Radio value={1}>赢</Radio>
                  </Radio.Group>
                </>
              );
            },
          },
        ]}
      />
      <ProTable
        loading={false}
        cardProps={false}
        bordered
        actionRef={actionRef}
        size="small"
        options={false}
        search={false}
        request={result}
        pagination={{
          pageSize:100
        }}
        rowClassName={(record, index) => {
          if (record.win === 1) {
            return 'row-success';
          } else if (record.win === 0) {
            return 'row-error';
          }
          return '';
        }}
        columns={[
          {
            title: '期数',
            dataIndex: 'sn',
          },
          {
            title: '金额',
            dataIndex: 'money',
            width:50,
          },
          {
            title: '结果',
            dataIndex: 'isOdd',
            width:50,
            valueEnum: {
              1: {
                text: '单',
              },
              0: {
                text: '双',
              },
            },
          },
          {
            title: '中',
            dataIndex: 'win',
            width:180,
            renderText: (_, record) => {
              return (
                <>
                  <Button size='small' type='primary' danger icon={<DeleteOutlined />} style={{marginRight:8}} onClick={(e) => {
                    Modal.confirm({
                      title: '提醒',
                      content: '修改预测结果',
                      onOk: () => {
                        remove({
                          sn: record.sn,
                        }).then((result) => {
                          message.success(result.msg).then();
                          actionRef.current?.reload();
                        });
                      },
                    });
                  }} />
                  <Radio.Group
                    onChange={(e) => {
                      Modal.confirm({
                        title: '提醒',
                        content: '修改预测结果',
                        onOk: () => {
                          update1({
                            sn: record.sn,
                            win: e.target.value,
                          }).then((result) => {
                            message.success(result.msg).then();
                            actionRef.current?.reload();
                          });
                        },
                      });
                    }}
                  >
                    <Radio value="false">输</Radio>
                    <Radio value="true">赢</Radio>
                  </Radio.Group>
                  {record.win === 1 && <img src={ok} style={{ width: 24, height: 24 }} />}
                  {record.win === 0 && <img src={error} style={{ width: 24, height: 24 }} />}
                </>
              );
            },
          },
        ]}
      />
    </PageContainer>
  );
};
